<template>
  <div class="mine">
    <van-cell is-link v-if="!token" @click="showPopup">
      <img src="../../public/user.png" alt="" />
      <span>点击登录</span>
    </van-cell>
    <van-popup v-if="!token" v-model:show="show">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            @click="onSubmit"
            round
            block
            type="primary"
            native-type="submit"
          >
            登录
          </van-button>
        </div>
      </van-form>
    </van-popup>
    <van-cell is-link v-if="token" @click="showPopup2">
      <img src="../../public/user.png" alt="" />
      <span>{{ name }}</span>
    </van-cell>
    <van-grid :column-num="3" :border="false" icon-color="blue">
      <van-grid-item icon="label-o" text="我的订单" class="grid" />
      <van-grid-item icon="bill-o" text="优惠券" class="grid" />
      <van-grid-item icon="hot-o" text="礼品卡" class="grid" />
      <van-grid-item icon="hot-sale-o" text="我的收藏" class="grid" />
      <van-grid-item icon="new-o" text="我的足迹" class="grid" />
      <van-grid-item icon="eye-o" text="会员福利" class="grid" />
      <van-grid-item icon="envelop-o" text="地址管理" class="grid" />
      <van-grid-item icon="flag-o" text="账号安全" class="grid" />
      <van-grid-item icon="notes-o" text="联系客服" class="grid" />
      <van-grid-item icon="bulb-o" text="帮助中心" class="grid" />
      <van-grid-item icon="edit" text="意见反馈" class="grid" />
    </van-grid>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useCounterStore } from "../stores/counter";
import { storeToRefs } from "pinia";
import { login } from "../server/mine";
import { showConfirmDialog } from "vant";
let counterStore = useCounterStore();
let { token, userinfo } = storeToRefs(counterStore);
let show = ref(false);

let username = ref("");
let password = ref("");
function onSubmit() {
  login({ username: username.value, pwd: password.value }).then((res) => {
    show.value = false;
    counterStore.setToken(res.data.token);
    counterStore.setUserinfo(res.data.userInfo);
    username.value = "";
    password.value = "";
  });
}
function showPopup() {
  show.value = true;
}
let name = computed(() => {
  return userinfo.value.username;
});
function showPopup2() {
  showConfirmDialog({
    title: "退出登录",
    message: "您是否退出当前账号?",
  }).then((res) => {
    counterStore.setToken("");
    counterStore.setUserinfo("");
    localStorage.removeItem("token");
  });
}

onMounted(() => {});
</script>

<style scoped>
.mine {
  width: 100%;
  height: calc(100% - 3.1875rem);
}
.van-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.van-form .van-field {
  background-color: #fff;
  height: 3.125rem;
}
:deep(.van-field__error-message) {
  width: 5rem;
  text-align: center;
}
.van-cell {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  padding-right: 30px;
  box-sizing: border-box;
  align-items: center;
  height: 6.875rem;
  padding: 0;
  margin: 0;
}
:deep(.van-cell__value) {
  display: flex;
  text-align: left;
  align-items: center;
  padding: 0;
  margin: 0;
  height: 100%;
}
:deep(.van-cell__value > img) {
  border-radius: 50%;
  width: 4.375rem;
  height: 4.375rem;
  margin: 0 0.625rem;
}
:deep(.van-icon) {
  margin-right: 1.25rem;
}
.van-grid {
  margin-top: 1.25rem;
}
:deep(.van-badge__wrapper) {
  margin: 0 auto;
}
:deep(.van-popup) {
  width: 80%;
  height: 12.5rem;
  border-radius: 0.9375rem;
}
</style>
